<template>
  <div
    class="blog-list df f1 offset-top text-base"
    v-for="item in articleList"
    :key="item.id"
    @click="goDetail(item.id)">
    <div class="blog-img cursor">
      <img
        class="scale"
        :src="item.cover ? joinUplodUrl(item.cover) : getAssetsFile('auth.jpg')"
        alt="" />
    </div>
    <div class="blog-info">
      <h3 class="title text-overflow cursor text-color-hover text-xl">{{ item.title }}</h3>
      <div class="time text-overflow">
        <span class="top text-color-strong" v-if="item.top">
          <span class="icon iconfont icon-zhiding2"></span>
          置顶
        </span>
        <span
          class="mr10 cursor text-color-link text-color-hover"
          v-if="item.category_name"
          @click.stop>
          <span class="iconfont icon-fenlei"></span>
          {{ item.category_name }}
        </span>
        <span class="iconfont icon-yanjing"></span>
        {{ item.read }}
      </div>
      <div class="time text-overflow text-color-remark text-sm">
        <span class="iconfont icon-time1"></span>
        发表于{{ dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss') }}
      </div>
      <div class="time text-overflow text-color-remark text-sm">
        <span class="iconfont icon-time"></span>
        更新于{{ dayjs(item.update_time).format('YYYY-MM-DD HH:mm:ss') }}
      </div>
      <div class="sub-title text-overflow cursor text-color-sub text-color-hover">
        {{ item.sub_title }}
      </div>
    </div>
  </div>
  <div class="pagination-box df jc-c">
    <el-pagination
      small
      background
      layout="prev, pager, next"
      :total="total"
      :hide-on-single-page="true"
      @change="pageChange" />
  </div>
</template>

<script setup lang="ts">
  import { getAssetsFile } from '@/utils/utils';
  import { dayjs } from 'element-plus';
  import { joinUplodUrl } from '@/utils/utils';
  import EventBus from '@/common/EventBus';
  import useBlogList from '@/hooks/useBlogList';
  const { articleList, pagination, getListFun, pageChange, total, goDetail } = useBlogList();

  onMounted(() => {
    // 事件总线 监听 接受数据
    EventBus.on('searchBlog', (res: any) => {
      const { keyword, categoryId } = res;
      pagination.value.keyword = keyword;
      pagination.value.categoryId = categoryId;
      pagination.value.page = 1;
      getListFun();
    });
  });
</script>

<style lang="scss" scoped>
  .blog-list {
    border-radius: 10px;
    background: var(--bg-color);
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
    .blog-img {
      width: 40%;
      overflow: hidden;
      height: 220px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .blog-info {
      flex: 1;
      padding: 25px;
      overflow: hidden;
      box-sizing: border-box;
      .top {
        margin-right: 10px;
      }
      .title,
      .time,
      .sub-title {
        margin-bottom: 15px;
      }
      .sub-title {
        margin-top: 15px;
      }
      .time {
        margin-bottom: 0px;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .blog-list {
      display: block;
      .blog-img {
        width: 100%;
        height: 100px;
      }
      .blog-info {
        padding: 15px;
        .title,
        .time,
        .sub-title {
          margin-bottom: 5px;
        }
      }
    }
  }
</style>
